@charset "utf-8";
.family-box {
    background-color: #8bc01f;
    .family-flash {
        background-color: #8bc01f;
        margin-top: 60px;
        padding: 0;
        background-image: url(../img/family/layaflash.png);
        background-repeat: no-repeat;
        background-position: top 0 right 16.3%;
        h3 {
            color: white;
            font-size: 48px;
            margin: 0;
            span {
                display: inline-block;
                background-color: white;
                color: #8bc01f;
                font-size: 48px;
                padding: 0 18px;
                margin-right: 5px;
            }
        }
        .family-content {
            p {
                color: white;
                font-size: 24.3px;
                padding-left: 5px;
                padding-top: 23px;
                margin: 0;
                padding-bottom: 50px;
            }
            span {
                color: white;
                font-size: 14.3px;
                padding-left: 5px;
                display: block;
                line-height: 2em;
                padding-bottom: 34px;
            }
            button {
                width: 100px;
                height: 34px;
                background-color: white;
                font-size: 14px;
                border: none;
                border-radius: 5px;
                margin-bottom: 94px;
            }
        }
    }
}
.player-box{
    background-color: #3393df;
    background-image: url(../img/family/layaplayer2.png);
    background-repeat: no-repeat;
    background-position: right 18% top 288px;
    .player-content{
        margin-top: 60px;
        padding: 0;
        background-image: url(../img/family/layaplayer1.png);
        background-repeat: no-repeat;
        background-position: top 78px left 0;
        h3 {
            color: white;
            font-size: 48px;
            margin: 0;
            span {
                display: inline-block;
                background-color: white;
                color:  #3393df;
                font-size: 48px;
                padding: 0 18px;
                margin-right: 5px;
            }
        }
        .player-text{
            margin-top: 42px;
            p{
               font-size: 24px;
               color: white;
               margin: 0;
               
            }
            span{
                display: inline-block;
                margin-top: 18px;
               font-size: 14px;
               color: #8BC01F;
               line-height: 2em; 
               margin-bottom: 34px;
            }
            span:nth-of-type(2){
                color: white;
                 line-height: 2em; 
                 margin-bottom: 101px;
            }
        }
    }
}
.content-box {
    margin-top: 80px;
    .content-list {
        .list-detail:nth-of-type(2){
            background-image:url(../img/family/layaopen.png) ;
            background-repeat: no-repeat;
            background-position: top 509px left 35%;
        }
        .list-detail {
            background-image: url(../img/family/layaair.png);
            background-repeat: no-repeat;
            background-position: top 509px left 35%;
            padding-bottom: 200px;
            h3 {
                color: #3393df;
                font-size: 42px;
                margin: 0;
                span {
                    display: inline-block;
                    background-color: #3393df;
                    color:white;
                    font-size: 36px;
                    padding: 0 10px;
                    margin: 0;
                }
            }
            span{
                display: block;
                margin:25px 0 37px;
                font-size: 18px;
                color: #5d5d5d;
            }
            h4{
                font-size: 18px;
                color: #3393df;
                margin: 0 ;
            }
            p{ 
                margin: 20px auto 37px;
                text-indent: 2em;
                color: #5d5d5d;
                line-height: 2em;
                height: 56px;
            }
        }
    }
}
.content-title {
    padding-top: 80px;
    background-color:#f7f7f7;
    .content-list {
        padding: 0;
        .list-detail:nth-of-type(2){
            background-image:url(../img/family/layapuilsh.png) ;
            background-repeat: no-repeat;
            background-position: top 509px left 35%;
        }
        .list-detail {
            background-image: url(../img/family/layastore.png);
            background-repeat: no-repeat;
            background-position: top 509px left 35%;
            padding-bottom: 180px;
            h3 {
                color: #3393df;
                font-size: 42px;
                margin: 0;
                span {
                    display: inline-block;
                    background-color: #3393df;
                    color:white;
                    font-size: 36px;
                    padding: 0 10px;
                    margin: 0;
                }
            }
            span{
                display: block;
                margin:25px 0 37px;
                font-size: 18px;
                color: #5d5d5d;
            }
            h4{
                font-size: 18px;
                color: #3393df;
                margin: 0 ;
            }
            p{ 
                margin: 20px auto 37px;
                text-indent: 2em;
                color: #5d5d5d;
                line-height: 2em;
                height: 56px;
            }
        }
    }
}
@media only screen and (max-width:768px){
    .family-box .family-flash .family-content button{
       margin-left: 35%;
       margin-bottom: 20px;
    }
   .content-title .content-list .list-detail h3{
        text-align: center;
    }
    .content-title .content-list .list-detail{
        background-size:100px 100px ;
        background-position: bottom 50px left 110px; 
    }
    .content-title .content-list .list-detail:nth-of-type(2){
         background-size:100px 100px ;
        background-position: bottom 50px left 110px; 
    }
    .content-box .content-list .list-detail h3{
        text-align: center;
    }
    .content-box .content-list .list-detail{
        background-image: none;
    }
    .player-box .player-content{
        background-image: none;
    }
    .player-box{
        background-image: none;
    }
    .family-box .family-flash{
         background-image: none;
    }
    .content-box .content-list .list-detail{
        padding: 0;
    }
}
